<template>
	<page-container title="订单管理">
		<view class="order-page">
			<scroll-view class="order-list" scroll-y @scrolltolower="loadMore" @refresherrefresh="refresh"
				:refresher-enabled="true" :refresher-triggered="loading">
				<view class="order-item" v-for="(item, idx) in orderList" :key="idx">
					<view class="order-header" @click="gotoDetails(item)">
						<view class="product-title">
							<text class="overhidds">{{item.title}}</text>
							<text class="iconfont icon-more"></text>
						</view>
						<text class="order-status">{{getStatusText(item.status)}}</text>
					</view>

					<view class="order-content" @click="gotoDetails(item)">
						<image :src="item.image" mode="aspectFill" class="product-image" />
						<view class="order-info">
							<text class="order-number">订单号：{{item.orderNo}}</text>
							<text class="order-time">消费时间：{{item.consumeTime}}</text>
						</view>
						<view class="price-info">
							<text class="price">¥ {{item.price}}</text>
							<view class="right-grap">
								<text class="points">+{{item.points}}积分</text>
								<text class="actual-price">实付 ¥ <text>{{item.actualPrice}}</text></text>
							</view>
						</view>
					</view>

					<view class="order-footer">
						<view class="more-btn" @click="gotoDetails(item)">更多</view>
						<view class="action-btns" v-if="item.status === OrderStatus.PENDING_COMMENT">
							<view class="btn review-btn" @click="gotoComment(item)">去评论</view>
						</view>
					</view>
				</view>

				<view class="loading-text" v-if="loading">加载中...</view>
				<view class="no-more" v-if="!hasMore && !loading">没有更多了</view>
			</scroll-view>
		</view>
	</page-container>
</template>

<script lang="ts" src="./index.ts"></script>

<style lang="scss" scoped>
	.order-page{
		position: relative;
		z-index: 11;
	}
	.order-list {
		padding: 10px;
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
		background: linear-gradient(180deg, #ffffff, #f3f3f3);

		.order-item {
			// background-color: #fff;
			// border-radius: 8px;
			margin-bottom: 10px;
			padding: 20rpx 20rpx;
			background: #ffffff;
			border-radius: 6px;
			box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.16);

			.order-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 15px;

				.product-title {
					display: flex;
					width: 176px;
					align-items: center;
					font-size: 16px;
					font-weight: 500;

					.overhidds {
						white-space: nowrap;
						/* 不换行 */
						overflow: hidden;
						/* 隐藏超出范围的文本 */
						text-overflow: ellipsis;
						/* 超出部分显示省略号 */
					}

					.iconfont {
						font-size: 24rpx;
						position: relative;
						top: 4rpx;
					}
				}

				.order-status {
					color: #999;
					font-size: 14px;
				}
			}

			.order-content {
				display: flex;
				// margin-bottom: 15px;

				.product-image {
					width: 58px;
					height: 58px;
					border-radius: 4px;
				}

				.order-info {
					// flex: 2;
					margin-left: 10rpx;
					display: flex;
					flex-direction: column;
					gap: 5px;
					font-size: 14px;
					color: #666;

					.order-number {
						font-size: 24rpx;
						font-weight: 500;
						color: #646464;
					}

					.order-time {
						font-size: 24rpx;
						font-weight: 500;
						color: #646464;
						margin-top: 32rpx;
					}
				}

				.price-info {
					text-align: right;
					flex: 1;

					.price {
						font-size: 16px;
						font-weight: 500;
						color: #000000;
					}

					.right-grap {
						display: flex;
						flex-direction: row-reverse;
						align-items: flex-end;
						margin-top: 32rpx;
					}

					.actual-price {
						color: #ff6b6b;
						font-size: 18rpx;
						display: block;

						text {
							font-size: 24rpx;
						}
					}

					.points {
						background-color: #43D534;
						color: #fff;
						padding: 2px 6px;
						border-radius: 2px;
						font-size: 20rpx;
						display: inline-block;
						margin-left: 8rpx;
					}
				}
			}

			.order-footer {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.more-btn {
					color: #646464;
					font-size: 14px;
				}

				.action-btns {
					display: flex;
					gap: 10px;

					.btn {
						width: 87px;
						height: 32px;
						border-radius: 6px;
						text-align: center;
						line-height: 32px;
						margin-top: 30rpx;
						outline: none;

						&.review-btn {
							background: #f4f5f7;
							color: #666;
							font-size: 14px;
							font-weight: 500;
							color: #000000;
						}

						&.reorder-btn {
							background: rgba(67, 213, 52, .3);
							border-radius: 6px;
							font-size: 14px;
							font-weight: 500;
							color: #43d534;
						}
					}
				}
			}
		}
	}
</style>